<template>
    <div class="login">
        <div class="login-content">
            <div class="login-content-title">
                <img src="@/assets/logo_jinqiyun@2x.png" alt="">
                <div>商家后台管理系统</div>
            </div>
            <div class="login-center">
                <div class="login-center-tab">
                    <div class="login-tab-title" :class="tabShow == 1 ? 'tab-title-active':''" @click="tabClick(1)">账户登录</div>
                    <div class="login-tab-title" :class="tabShow ==2 ? 'tab-title-active':''" @click="tabClick(2)">扫码登录</div>
                </div>
                <div class="login-center-content" v-if="tabShow == 1">
                    <div class="login-input">
                         <a-input placeholder="请输入登录账号" v-model="loginForm.username">
                            <img src="@/assets/zhanghao@2x.png" class="login-input-img"  slot="prefix"/>
                        </a-input>
                    </div>
                    <div class="login-input">
                        <a-input-password placeholder="请输入正确的登录密码" v-model="loginForm.password">
                            <img src="@/assets/mima@2x.png" class="login-input-img" slot="prefix" />
                        </a-input-password>
                    </div>
                    <div class="login-yan">
                         <a-input placeholder="请输入验证码" v-model="code">
                            <img src="@/assets/yanzhengma@2x.png" class="login-input-img"  slot="prefix"/>
                        </a-input>
                        <div class="login-yan-iden">
                            <identify ref="identify" @iden="iden"></identify>
                        </div>
                        <div class="login-change" @click="changeIden">换一张</div>
                    </div>
                    <div class="login-pass">
                        <div class="login-pass-left">
                            <div class="login-pass-left-select"></div>
                            <div>7天内自动登录</div>
                        </div>
                        <div class="login-pass-right">忘记密码?</div>
                    </div>
                    <div class="login-in" @click="loginIn()">登录</div>
                </div>
                <div class="login-center-content" v-else>
                    <div class="login-center-code">
                        <img src="@/assets/erweima.jpg" alt="" class="login-code-img">
                        <div class="login-code-pos">
                            <div>二维码已失效</div>
                            <div class="login-code-resh">
                                <img src="@/assets/refresh@2x.png" alt="">
                                <div>请点击刷新</div>
                            </div>
                        </div>
                    </div>
                    <div class="login-code-title">
                        <img src="@/assets/saoyisao@2x.png" />
                        <div>打开手机版商家后台管理系统 扫一扫登录</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import identify from '@/components/identify'
// import { login } from '@/api/permission'
export default {
  components: {
    identify
  },
  data () {
    return {
      tabShow: 1,
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      code: '',
      identify: ''
    }
  },
  methods: {
    tabClick (val) {
      if (val == 1) {
        this.tabShow = 1
      } else {
        this.tabShow = 2
      }
    },
    changeIden () {
      this.$refs.identify.drawPic()
    },
    iden (val) {
      this.identify = val
      console.log(val)
    },
    loginIn () {
      if (this.identify.toUpperCase() == this.code.toUpperCase()) {
        this.$axios.post('/api/user/login', this.loginForm).then((res) => {
          const token = res.token
          this.$store.commit('LOGIN_IN', token)
          this.$router.replace('/index')
        }).catch((err) => {
          this.$message.warning(err)
        })
      } else {
        this.$message.warning('验证码错误')
      }
    }
  }

}
</script>

<style>
.ant-input-affix-wrapper .ant-input:not(:first-child){
    padding-left: 40px !important;
}
.ant-input-affix-wrapper .ant-input:not(:last-child){
    padding-left: 40px !important;
}
.ant-input{
    height: 56px;
}
</style>

<style scoped lang="stylus">
    .login
        width 100vw
        height 100vh
        background url("../../assets/back-img@2x.png") no-repeat center center
        display flex
        align-items center
        justify-content center
        .login-content
            .login-content-title
                display flex
                align-items  center
                justify-content center
                font-size 40px
                color #fff
                img
                   width 66px
                   margin-right 11px
            .login-center
                margin-top 36px
                width 600px
                background:rgba(239,246,255,0.4);
                box-shadow:0px 5px 35px 0px rgba(97,130,172,0.53);
                .login-center-tab
                    width 100%
                    height 68px
                    line-height 68px
                    display flex
                    border-bottom 1px solid rgba(239,246,255,0.24);
                    .login-tab-title
                        flex 1
                        text-align center
                        font-size 22px
                        color:rgba(255,255,255,0.5);
                    .tab-title-active
                        background:rgba(239,246,255,0.2);
                        color #fff
                .login-center-content
                    display flex
                    align-items center
                    justify-content center
                    flex-direction column
                    padding-top 48px
                    .login-input
                        width 460px
                        height 56px
                        line-height 56px
                        background rgba(255,255,255,1)
                        display flex
                        align-items center
                        margin-bottom 16px
                        input
                            flex 1
                        .login-input-img
                            width  18px
                            margin-right 11px
                    .login-pass
                        margin-top 22px
                        width 100%
                        padding 0 67px
                        display flex
                        align-items center
                        justify-content space-between
                        color #ffffff
                        font-size 16px
                        .login-pass-left
                            display flex
                            justify-content center
                            align-items center
                            color #ffffff
                            font-size 16px
                            margin-left 8px
                            .login-pass-left-select
                                width:18px;
                                height:18px;
                                background:rgba(255,255,255,1);
                                border-radius:4px;
                                margin-right 8px
                    .login-yan
                        width 460px
                        display flex
                        align-items center
                        justify-content center
                        line-height 1
                        .login-input-img
                            width  18px
                            margin-right 11px
                        .login-yan-iden
                            margin-left  5px
                            margin-right 5px
                        .login-change
                            font-size 14px
                            color #fff
                            width 81px
                            cursor pointer
                    .login-in
                        cursor pointer
                        margin-top 53px
                        margin-bottom 54px
                        width:460px;
                        height:56px;
                        background:rgba(56,123,252,1);
                        text-align center
                        line-height 56px
                        color #ffffff
                        font-size 18px
            .login-center-code
                width 200px
                height 200px
                background:rgba(239,246,255,1);
                display flex
                align-items center
                justify-content center
                position relative
                .login-code-img
                    width 150px
                .login-code-pos
                    position absolute
                    top 25px
                    left 25px
                    width 150px
                    height 150px
                    background:rgba(239,246,255,0.96);
                    display flex
                    align-items center
                    justify-content center
                    flex-direction column
                    color #333333
                    font-size 16px
                    .login-code-resh
                        margin-top 11px
                        width:150px;
                        height:40px;
                        background:rgba(94,131,176,1);
                        border-radius:6px;
                        display flex
                        align-items center
                        justify-content center
                        text-align center
                        line-height 40px
                        font-size 14px
                        color #ffffff
                        img
                          width 13px
                          margin-right 11px

            .login-code-title
                margin-top 45px
                margin-bottom 72px
                display flex
                align-items center
                color #ffffff
                font-size 18px
                img
                    width  26px
                    margin-right 28px

input::-webkit-input-placeholder {
    color:rgba(94,131,176,0.6);text-align: left;
}
input::-moz-placeholder { color:rgba(94,131,176,0.6); text-align: left;} /* firefox 19+ */
input:-ms-input-placeholder { color:rgba(94,131,176,0.6);text-align: left; } /* Internet Explorer 10+ */
input:-moz-placeholder { color:rgba(94,131,176,0.6); text-align: left;} /* firefox 14-18 */

</style>
